<template>
	<view class="me-address-item-container">
		<view class="me-address-left">{{props.addressItem.name[0]}}</view>
		<view class="me-address-middle">
			<view class="me-address-item-top-container">
				<view class="me-address-item-name">{{props.addressItem.name}}</view>
				<view class="me-address-item-call">{{props.addressItem.phone}}</view>
			</view>
			<view class="me-address-container">
				<view class="me-address-item-detail-address">
					{{props.addressItem.address}}
				</view>
			</view>
		</view>
		<view class="me-address-right" @click="goEdit">
			<image src="../../static/eidt.png" mode="widthFix"></image>
		</view>
		
	</view>
</template>

<script>
	export default{
		name:'me-address-item',
		setup(props,context){
			// console.log(props,context)
			function goEdit(){
				uni.setStorageSync('addressData',JSON.stringify(props.addressItem))
				// console.log(uni.getStorageSync('addressData'))
				uni.navigateTo({
					url:'/pages/me/me-address-edit',
				})
			}
			
			return {
				goEdit,
				props
			}
		}
	}
</script>

<style scoped>
	.me-address-item-container{
		padding: 10rpx;
		width: 68s0rpx;
		margin: 5rpx 0rpx;
		border-bottom: 3rpx solid #515151;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	
	.me-address-left{		
		background-color: #9BCDD2;
		border-radius: 200rpx;
		width: 75rpx;
		height: 75rpx;
		text-align: center;
		line-height: 75rpx;
		color: white;
		font-size: 30rpx;
		font-weight: bold;
	}
	
	.me-address-middle{
		width: 550rpx;
		margin-left: 10rpx;
	}
	
	.me-address-right{
		width: 40rpx;
		margin-left: 10rpx;
		text-align: center;
		align-items: center;
	}
	
	.me-address-right image{
		width: 40rpx;
	}
	
	.me-address-container{
		display: flex;
		word-wrap: break-word;
	}
	
	.me-address-item-detail-address{
		overflow:hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 2;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		padding: 5rpx 6rpx;
		font-size: 28rpx;
	}
	
	.me-address-item-top-container{
		display: flex;
		padding: 5rpx 0;
		font-size: 30rpx;
	}
	
	.me-address-item-name{
		margin: 0rpx 10rpx;
		font-weight: bold;
	}
	
	.me-address-item-call{
		margin: 0rpx 10rpx;
		font-weight: bold;
	}
	
	
</style>